<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item label="编号" prop="number">
        <el-input  v-model="form.numberNum" disabled style="width: 280px;"/>
      </el-form-item>
      <el-form-item label="项目名称" prop="projectName">
        <el-select v-model="form.projectName"
                   disabled
                   style="width: 24%"
                   placeholder="请选择" clearable>
          <el-option
            v-for="item in projectNameList"
            :key="item.projectName"
            :label="item.projectName"
            :value="item.projectName"
          ></el-option>
        </el-select>
        <!-- <el-input v-model="form.projectName" placeholder="请输入项目名称" :disabled="isDisabled" /> -->
      </el-form-item>
      <el-form-item label="付款单位" prop="payUnit">
        <el-input v-model="form.payUnit" style="width: 24%" :disabled='isdisabled' placeholder="请输入付款单位" />
      </el-form-item>
      <el-form-item label="付款金额(元)" prop="payTotal" label-width="120px">
        <el-input v-model="form.payTotal"
                  style="width: 24%"
                  @input="form.payTotal=form.payTotal.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"
                  :disabled='isdisabled' placeholder="请输入付款金额" />
      </el-form-item>
      <el-form-item label="付款方式" prop="payWay">
        <el-select v-model="form.payWay"
                   style="width: 24%"
                   placeholder="请选择付款方式" :disabled='isdisabled'>
          <el-option
            v-for="dict in dict.type.pay_way"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="付款日期" prop="payDate">
        <el-date-picker
          clearable
          v-model="form.payDate"
          type="date"
          style="width: 24%"
          value-format="yyyy-MM-dd"
          placeholder="请选择付款日期"
          :disabled="isdisabled"
          default-time="00:00:00"
          format="yyyy-MM-dd"
          @change="dateChanged"
          :picker-options="pickerOption"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="收款人全称" prop="payeeName" >
        <el-input v-model="form.payeeName" style="width: 24%" :disabled='isdisabled' placeholder="请输入收款人全称" />
      </el-form-item>
      <el-form-item label="银行账号" prop="bankAccount">
        <el-input v-model="form.bankAccount" style="width: 24%" :disabled='isdisabled' placeholder="请输入银行账号" />
      </el-form-item>
      <el-form-item label="开户行" prop="bank">
        <el-input v-model="form.bank" style="width: 24%" :disabled='isdisabled' placeholder="请输入开户行" />
      </el-form-item>
      <el-form-item label="发票" prop="invoice">
        <el-select v-model="form.invoice" style="width: 24%" placeholder="请选择" :disabled='isdisabled'>
          <el-option
            v-for="item in invoiceList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <!--              <el-input v-model="form.invoice" :disabled='isdisabled' placeholder="请输入发票" />-->
      </el-form-item>
      <el-form-item label="付款事由" prop="payReason">
        <el-input :disabled='isdisabled' v-model="form.payReason" type="textarea" placeholder="请输入内容" />
      </el-form-item>
      <el-form-item label="备注说明" prop="remarks">
        <el-input :disabled='isdisabled' v-model="form.remarks" type="textarea" placeholder="请输入内容" />
      </el-form-item>
    </el-form>
    <div
      v-show="parentTaskId===null&&confirmVisible"
      class="dialog-footer"
      style="text-align:center"
    >
      <el-button :loading="buttonLoading" size="small" type="info" @click="submitCallback">关闭</el-button>
      <el-button :loading="buttonLoading" size="small" type="primary" @click="submitForm">提交</el-button>
    </div>
    <div
      v-show="parentTaskId==null&&!confirmVisible"
      class="dialog-footer"
      style="text-align:right"
    >
      <el-button :loading="buttonLoading" size="small" type="info" @click="submitCallback">关闭</el-button>
    </div>
      <!-- 工作流开始 -->
      <verify ref="verifyRef"
              :taskId="taskId"
              :deptId="dept.deptId"
              @submitCallback="submitCallback" :componentName="componentName"
              :taskVariables="taskVariables"
              :sendMessage="sendMessage"></verify>
  </div>
</template>

<script>
import { getFinancePayment } from "@/api/oa/financePayment";
import verify from "@/components/Process/Verify";
import {parseTime} from "@/utils/ruoyi";
import dayjs from "dayjs";
export default {
  name: "FinancePaymentForm",
  dicts: ['pay_way'],
  components: {
      verify
  },
  props: {
      businessKey: String, // 业务唯一标识
      parentTaskId: String, // 父级任务id
      taskId: String, // 任务id
      confirmVisible:{
          type: Boolean,
          default: true
      }
  },
  data() {
    return {
      componentName: "付款申请",
      isdisabled:true,
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 表单参数
      form: {},
        projectNameList:[],
      invoiceList:[{
        label:"收到",
        value:"收到"
      },{
        label:"未收到",
        value:"未收到"
      }],
      // 出差日期的可选范围
      pickerOption: {
        disabledDate: time => {
          return time.getTime() <= Date.now() - 8.64e7;
        }
      },
      // 表单校验
      rules: {
        projectName: [
          { required: true, message: "项目名称不能为空", trigger: "blur" }
        ],
        payReason: [
          { required: true, message: "付款事由不能为空", trigger: "blur" }
        ],
        payUnit: [
          { required: true, message: "付款单位不能为空", trigger: "blur" }
        ],
        payTotal: [
          { required: true, message: "付款金额不能为空", trigger: "blur" }
        ],
        payWay: [
          { required: true, message: "付款方式不能为空", trigger: "change" }
        ],
        payDate: [
          { required: true, message: "付款日期不能为空", trigger: "blur" }
        ],
        payeeName: [
          { required: true, message: "收款人全称不能为空", trigger: "blur" }
        ],
        bankAccount: [
          { required: true, message: "银行账号不能为空", trigger: "blur" }
        ],
        rank: [
          { required: true, message: "开户行不能为空", trigger: "blur" }
        ],
        invoice: [
          { required: true, message: "发票不能为空", trigger: "blur" }
        ],
        remarks: [
          { required: true, message: "备注说明不能为空", trigger: "blur" }
        ],
      },
      taskVariables: undefined,
      //消息提醒
      sendMessage: {},
      processKey: 'oa_finance_payment',
      dept:"",
    };
  },
  watch: {
      businessKey: {
          immediate: true, // 很重要！！！
          handler (newVal) {
              if(newVal) {
                  this.getById()
              }
          }
      }
  },
  mounted() {
    if (this.$store.state.user.roles[0]=="common"||this.$store.state.user.roles[0]=="board"){
      this.dept=this.$store.state.user.dept?this.$store.state.user.dept:"";
    }
  },
  methods: {
    /*日期范围控件选择完毕*/
    dateChanged() {
      if (this.form.startDate != null && this.form.endDate != null) {
        let val = dayjs(this.form.endDate).diff(
          dayjs(this.form.startDate),
          "days"
        );
        this.form.duration = val < 0 ? val : val + 1;
      }
    },
    submitCallback(){
        this.$emit("closeForm")
    },
    async getById() {
      const {data} = await getFinancePayment(this.businessKey)
      this.form = data;
      if (data.actBusinessStatus.createTime){
            this.form.numberNum=this.processKey + '@' + parseTime(data.actBusinessStatus.createTime, '{y}{m}{d}{h}{i}{s}')
        }
    },
    /** 提交按钮 */
    submitForm() {
        getFinancePayment(this.businessKey).then(response => {
            this.taskVariables = {
                entity: response.data,
            };
            this.sendMessage = {
          title: "财务付款申请审批提醒",
          messageContent: this.$store.state.user.nickName + "审批通过了财务付款申请"
        };
        });
        this.$refs.verifyRef.visible = true
        this.$refs.verifyRef.reset()
    },
  }
};
</script>
<style scoped>
    /* 设置滚动条宽度和高度 */
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
        width: 8px; /* 横向滚动条 */
        height: 8px; /* 纵向滚动条 必写 */
    }
    /* 设置滚动条样式 */
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
        background-color: #dde;
        border-radius: 3px;
    }
    #selectForm >>> .el-form-item__label {
        font-size: 12px;
    }
    ::v-deep .bjsm .el-form-item__content{
        width: calc(100% - 130px) !important;
    }
</style>
